<template>
  <nut-form class="page-change" ref="ruleForm" :model-value="formData">
    <nut-form-item
      label="原密码"
      prop="pwd"
      required
      :rules="[{ required: true, message: '请填写姓名' }]"
    >
      <input
        class="nut-input-text"
        placeholder="请输入密码"
        type="password"
        v-model="formData.pwd"
      />
    </nut-form-item>
    <nut-form-item
      label="新密码"
      prop="pwd1"
      required
      :rules="[{ required: true, message: '新密码不能为空' }]"
    >
      <input
        class="nut-input-text"
        placeholder="请输入新密码"
        type="password"
        v-model="formData.pwd1"
      />
    </nut-form-item>
    <nut-form-item
      label="确认新密码"
      prop="pwd2"
      required
      :rules="[{ required: true, message: '确认新密码不能为空' }]"
    >
      <input
        class="nut-input-text"
        placeholder="请再次输入新密码"
        type="password"
        v-model="formData.pwd2"
      />
    </nut-form-item>
  </nut-form>
  <div class="user-login-box">
    <nut-button  block  type="primary" @click="changepwd">确认修改</nut-button>
  </div>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { usePullDownRefresh, useReachBottom } from '@/hooks/life'
import { useDidShow } from '@tarojs/taro'
import { ref, onMounted, reactive } from 'vue'
import { infoSavePwd } from '@/services/apis/user'
const formData = reactive({
  pwd: '',
  pwd1: '',
  pwd2: ''
})
const validate = (item: any) => {
  console.log(item)
}
const ruleForm = ref<any>(null)
const changepwd = (prop: string) => {
  ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
    if (valid) {
      console.log('success', formData)
      if (!formData.pwd) {
        wx.showToast({
          title: '用户密码不能为空',
          icon: 'none',
          duration: 2000
        })
        return
      }
      if (!formData.pwd1) {
        wx.showToast({
          title: '新密码不能为空',
          icon: 'none',
          duration: 2000
        })
        return
      }
      if (!formData.pwd2) {
        wx.showToast({
          title: '确认新密码不能为空',
          icon: 'none',
          duration: 2000
        })
        return
      }
      if (formData.pwd2 != formData.pwd1) {
        wx.showToast({
          title: '两次输入密码不一致',
          icon: 'none',
          duration: 2000
        })
        return
      }
      infoSavePwd(formData.pwd, formData.pwd1, formData.pwd2).then(data => {
        wx.showToast({
          title: data.message,
          icon: 'none',
          duration: 2000
        })
      })
    } else {
      console.log('error submit!!', errors)
    }
  })
}
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
.page-change{
    .nut-cell {
        display: block;
    }
    .nut-form-item__label{
        font-size: 12px;
        margin-bottom: 10px;
        width: 100%;
        display: block !important;
    }
  .nut-cell-group{
    .input-placeholder {
        color: rgba(0, 0, 0, 0.2);
    }
    .nut-input-text{
        font-size: 14px;
    }
    .nut-cell{
        &:last-child{
            &::after {
                border-bottom:1px solid #f5f6f7!important;
            }
        }
    }
  }
}
.user-login-box {
  position: relative;
  padding: 60px 50px 0 50px;
  text-align: center;
  p {
    line-height: 20px;
    font-size: $font-size-1;
    color: #fff;
  }
}
</style>
